  //定义地图中心点坐标
  let lat = localStorage.getItem('lat') || 39.984120
  let lng = localStorage.getItem('lng') || 116.307484
  var center = new TMap.LatLng(lat, lng)
  //定义map变量，调用 TMap.Map() 构造函数创建地图
  var map = new TMap.Map(document.querySelector('.map'), {
    center: center,//设置地图中心点坐标
    zoom: 10,   //设置地图缩放级别
    pitch: 43.5,  //设置俯仰角
    rotation: 45    //设置地图旋转角度
  });

  function createMapFn(data){
      console.log(data);
        //创建marker事件
            let  marker = new TMap.MultiMarker({
                    // id: 'marker-layer',
                    map: map,
                    styles: {
                        "marker": new TMap.MarkerStyle({
                            "width": 25,
                            "height": 35,
                            "anchor": { x: 16, y: 32 },
                            "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                        })
                    },
                    // 由源码的的经度纬度，改成后端数据使用map遍历修改数组的每个数据，进行打点。
                    
                    geometries: data.list.map((item,index)=>{
                        return {
                            "id": 'demo',
                            "styleId": 'marker',
                            "position": new TMap.LatLng(item.lat, item.lng),
                            "properties": {
                                "title": "marker"
                            }
                        }
                    })
                });
            //中心变化 随着鼠标滚动发生变化
            window.onscroll=function(){
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                let imgObj = document.querySelectorAll('.list-ul>li')
                imgObj.forEach(item=>{
                    // 在每个li标签中插入lat 和lng数据 一边后续使用
                    let lat = $(item).attr('lat')
                    let lng = $(item).attr('lng')
                    // 防止参数报错
                    if(!lat || !lng) return
                    // 判断切换地图中心
                    if(scrollTop>item.offsetTop && scrollTop<item.offsetTop+173){
                        map.setCenter(new TMap.LatLng(lat, lng));//中心
                        map.setZoom(18); //比例
                    }
                   
                })
            }
            //TODO:地图选写，中心位置切换的提示信息等。
        
  }
  getStoreFn() 
// 筛选
$('.filter').on('click','a',function(){
  getStoreFn() 
})
$('.filter').on('click','.all',function(){
  getStoreFn() 
})
// 排序
$('.tags a').click(function(){
   let text = $(this).text()
  //  console.log(text);
  let textObj={'评分最高':'comment','销量最高':'sell','距离最近':'location',}
  order = textObj[text]
  //  【可选】排序规则，评分最高-传comment， 销量最高-传sell ，距离最近-传location
  getStoreFn()
})

    function getStoreFn(){
      $.get('api/waimai/store.jsp',{
        // 筛选城市 
        pageno:1,
        pagesize:10,
        cat_id,
        area_id,
        lat,
        lng,
        attr:attr.join(','),
        order
      },res=>{
        console.log(res);
        $('.list-ul').text('')
        let html =''
        $.each(res.data.list,(index,item)=>{
          // 好评差评
          let comment = parseInt(item.comment_good_count/item.comment_count*100)/10
          // 距离
          let distance = getDistance(item.lng,item.lat)
          //tags标签
          let tags= item.tags.split(',').map((twoItem,i)=>{
            return `#${twoItem}# &nbsp`
          })
          // 图片：千牛云  todo:图片大小优化
          html+=`
          <li class="clear btm" data-ad="" lat = "${item.lat}" lng ="${item.lng}">
                  <div class="img">
                    <a href="./waimai-detail.html?store_id=${item.id}">
                      <div class="fl-count">${item.id}</div>
                      <div class="imgbox">
                        <img src="http://tmp00001.zhaodashen.cn/${item.img}">
                      </div> 
                    </a>
                  </div>
                  <div class="info">
                    <a href="./waimai-detail.html">
                      <h4>${item.title}</h4>
                      <div class="source clear">
                        <div class="star-cont">
                          <ul class="stars-ul">
                            <li><i class="iconfont icon-pingfen"></i></li>
                            <li><i class="iconfont icon-pingfen"></i></li>
                            <li><i class="iconfont icon-pingfen"></i></li>
                            <li><i class="iconfont icon-pingfen"></i></li>
                            <li><i class="iconfont icon-pingfen"></i></li>
                          </ul>
                          <ul class="stars-ul stars-light" style="width: ${comment*10}px;">
                            <li><i class="iconfont icon-pingfen"></i></li>
                            <li><i class="iconfont icon-pingfen"></i></li>
                            <li><i class="iconfont icon-pingfen"></i></li>
                            <li><i class="iconfont icon-pingfen"></i></li>
                            <li><i class="iconfont icon-pingfen"></i></li>
                          </ul>
                        </div>
                        <p>${comment}<span>${item.comment_count}条评论</span> </p>
                      </div>
                      <p class="desc">
                        ${item.address}
                        <span>起送￥${item.start_price}、夜间配送￥${item.send_price}、人均￥${item.avg_price}、${distance}</span>
                      </p>
                      <div class="other"></div>
                      <span>
                       ${tags.join('')}
                      </span>
                    </a>
                  </div>
                </li>
          `
        })
        $('.list-ul').html(html)
        // 腾讯地图打点
       createMapFn(res.data)
      },'json')


    }
   
      